
//绘制键盘
function drawKeyboard(type) {
    $("#keyboardNum").empty();

    if (type == "lower") {
        var keyboardNum = {"1": "1", "2": "2", "3": "3", "4": "4", "5": "5", "6": "6", "7": "7", "8": "8", "9": "9", "10": "Backspace",  "11": "0" ,};
        var key = "";
    }

    $.each(keyboardNum, function (key, value) {
        if (value != "Backspace") {
            key = $('<div class="simpleKey" name="key" key="' + key + '" value="' + value + '">' + value + '</div>');
            $("#keyboardNum").append(key);
        }
        else {
            key = $('<div class="backspaceKey" name="key"  key="' + key + '" value="' + value + '">' + value + '</div>');
            $("#keyboardNum").append(key);
        }
    });
    addMouseClickEvent();
}

//监听鼠标点击事件
function addMouseClickEvent() {
    $("#close ,#hide").click(function () {
        closeKeyboard()
    });

    $("div[name='key']").hover(function () {
        $(this).css("background-color", "Gray");
    }, function () {
        $(this).css("background-color", "White");
    }).click(function () {
        var thisValue = $(this).attr("value");
        var ID = $("#state").val();
        switch (thisValue) {
            case "Backspace":
                $("#" + ID).val($("#" + ID).val().substring(0, $("#" + ID).val().length - 1));
                break;
            default:
                $("#" + ID).val($("#" + ID).val() + thisValue);
                break;
        }
    });
}

//打开键盘
function openKeyboard(ID) {
    $("#keyboard").animate({bottom:'0',}, 800).css("visibility", "visible");
    $("#state").val(ID);
}

//关闭键盘
function closeKeyboard() {
    $("#keyboard").animate({bottom:'-30rem',}, 800,function(){
            $("#keyboard").css("visibility", "hidden");
            $("#state").val($("#txtID").val())
    });
}
$(function () {
    var divKeyBoard = '<div id="keyboard" class="keyboard"><div id="keyboardNum"></div><span><div id="hide" class="hide"></div><div id="close" class="close">确定</div></span></div>';
    $(".r_box").append(divKeyBoard);
    drawKeyboard("lower");
    $("#keyboard").css("visibility", "hidden");

})